<template>
  <div>
    <div class="item" v-for='(item,index) of list' :key='item.id'>
        <div class='item-title border-bottom' @click="handleClickChildren(index)" >
          <img class='item-img' src="https://img1.qunarzz.com/piao/fusion/1804/b0/c3cf2897c74ecc02.png" alt="">
          {{item.title}}
        </div>
        <div class='item-children' v-show="showChildren">
          <detail-List :list='item.children'></detail-List>
        </div>
    </div>
  </div>
</template>

<script>
  export default{
    name:'DetailList',
    props: {
        list:Array
    },
    data(){
      return{
        showChildren:false,
        currentIndex:0
      }
    },
    methods:{ // 如果当前点击的div存在children item-children就显示  再次点击隐藏
      handleClickChildren(index) {
         const currentIndex = index
         const newList = this.list[currentIndex]
         for(let i in newList){
           if(i === 'children'){
             this.showChildren = !this.showChildren
           }
         }
         }
     }
  }
</script>

<style lang="stylus" scoped="scoped">
.item-img
 padding 0 0.1rem
.item-title
  height 0.7rem
  line-height .7rem
  text-align left
.item-children
     padding 0 0.2rem
     font-size .24rem
     color goldenrod
</style>
